<template>
    <div id="app">
        <div id="box">
            <ul>
                <li v-for="(val,index) in arr" v-on:click="visited(index)" class=visit>{{val}}</li>
            </ul>
            <div  >
                <div></div>
            </div>
        </div>
        <div class="row">
            <div class="col-4">
                <div class="nav flex-column nav-pills" id="v-pills-tab1" role="tablist"  v-for="(arr,index) in list">
                    <router-link class="nav-link " id="'a'+index" data-toggle="pill" to="'b'+index" role="tab" >{{val}}
                    </router-link>
                </div>
            </div>
            <div class="col-8">
                <div class="tab-content" id="v-pills-tabContent1">
                    <div class="tab-pane fade show active" id="'b'+index" role="tabpanel" v-for="(arr,index) in arr" :key="index"
                         aria-labelledby="'a'+index">
                        <!--{{index}}-->
                        <div v-for="(arr,index) in array" :key="index">
                            <div><img :src="arr.src[index]" alt=""></div>
                            <div>
                                <h6>{{arr.title[index]}}</h6>
                                <p><span>{{arr.price[index]}}</span></p>
                                <p>销量 {{arr.num[index]}} 笔</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="less">
    #box{
        display: flex;
    }
    #box ul{
        list-style: none;
    }
    #box ul li{
        padding:15px 20px;
        background: #ccc;
    }
    #box ul .visit{
        background: white;
        color: #C01720;
        border-left: 3px solid  #C01720;
    }
    #box>div{
        width: 500px;
        height: 1000px;
        background: pink;
        display: none;
    }
    #box>div .current{
        display: block;
    }
</style>
<script>
    export default{
        name: 'Cheap1',
        data(){
            return {
                arr:['今日特价','水果蛋糕','儿童蛋糕','祝寿蛋糕','鲜花蛋糕','慕斯蛋糕','奶油蛋糕','网红蛋糕','情侣蛋糕']
            }
        },
        methods:{  //函数
           visited:function (index) {
               // var flag;
               // //调用内部方法要用 this.
               // for(var i=0;i<this.arr.length;i++){
               //     if(this.arr[i]==ev.target.innerHTML){
               //         flag = true;
               //         console.log(this.arr[i]);
               //         break;
               //     }else {
               //         flag=false;
               //     }
               // }
               // return flag;

               this.currentIndex=index
           }
        },

    }
</script>